<template>
  <div class="container">
    <div class="header-c">
      <div
        class="header-l"
        @click="selectCity()"
      >
        <i
          class="icon mt-location-o"
          :style="{color: '#434343', 'font-size': 38 + 'rpx'}"
        ></i>
        <span>{{city}}</span>
        <i
          class="icon mt-arrow-down-o"
          :style="{color: '#434343', 'font-size': 28 + 'rpx'}"
        ></i>
      </div>
      <div class="header-r">
        <div class="search-bar">
          <i class="icon mt-search-o"></i>
          <input
            placeholder="请输入收货地址"
            placeholder-style="font-size: 24rpx"
            v-model="inputSeach"
            @input="bindInpt()"
          />
          <div class="cancle">
            <i class="icon qb-icon-cancle-o"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="addressList">
      <div
        v-for="(item,index) in addressList"
        :key="index"
        class="add_"
        @click="getAddress(item.name,item.location,item.district)"
      >
        <span class="address_name">{{item.name}}</span>
        <span class="address_desc">{{item.district}}{{item.address}}</span>
      </div>
    </div>
    <div
      class="nearby-address"
      :class="[addressList!=''?'none':'']"
    >
      <div class="header">
        <i class="icon mt-location-o"></i>
        <span>附近地址</span>
      </div>
      <div class="list-c">
        <div
          class="item"
          v-for="(item, index) in nearbyAddress"
          :key="index"
          @click="getNearTo(item.address,item.location,item.cityname)"
        >
          <span>{{item.address}}</span>
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	data() {
		return {
			id: '', //返回状态 1是修改地址0是增加地址
			seach1: '',
			city: '', //所在城市
			jingdu: '', //经度
			weidu: '', //纬度
			addressList: [], //搜索的地址
			nearbyAddress: [],
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id
		}
		this.getlongitudeT()
	},
	methods: {
		getlongitudeT() {
			var that = this
			wx.getLocation({
				type: 'wgs84',
				success: function(res) {
					var latitude = res.latitude
					var longitude = res.longitude
					that.weidu = latitude
					that.jingdu = longitude
					that.getAdress(latitude, longitude)
					that.getNearAdress(latitude, longitude)
				},
			})
		},
		//获取当前地址
		getAdress(latitude, longitude) {
			var that = this
			wx.request({
				url:
					'https://restapi.amap.com/v3/geocode/regeo?key=e80eace082b331e7da1bce2f3d7b73ec&location=' +
					longitude +
					',' +
					latitude,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded', // 默认值
				},
				success(res) {
					that.city = res.data.regeocode.addressComponent.city
				},
			})
		},
		//用户输入选择地址
		bindInpt() {
			var seach = this.inputSeach
			var that = this
			wx.request({
				url:
					'https://restapi.amap.com/v3/assistant/inputtips?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
					seach +
					'&location=' +
					this.jingdu +
					',' +
					this.weidu +
					'&city=' +
					this.city +
					'&datatype=all',
				success(res) {
					that.addressList = res.data.tips
				},
			})
		},
		//获取附近地址
		getNearAdress(latitude, longitude) {
			var that = this
			wx.request({
				url:
					'https://restapi.amap.com/v3/place/around?key=e80eace082b331e7da1bce2f3d7b73ec&keywords=' +
					that.seach1 +
					'&location=' +
					longitude +
					',' +
					latitude,
				success(res) {
					that.nearbyAddress = res.data.pois
				},
			})
		},
		//获取附近地址传值
		getNearTo(name, jingweidu, cityname) {
			var city = this.city
			var addressGo = cityname + name
			console.log(jingweidu)
			var jwd = jingweidu.split(',')
			var weidu = jwd[1]
			var jingdu = jwd[0]
			if (this.id == 0) {
				wx.navigateTo({
					// url: '/pages/addAddress/main?addressGo=' + addressGo,
					url: `/pages/addAddress/main?addressGo=${addressGo}&jingdu=${jingdu}&weidu=${weidu}`,
				})
			}
			if (this.id == 1) {
				wx.navigateTo({
                    // url: '/pages/updataAddress/main?addressGo=' + addressGo,
                    url: `/pages/addAddress/main?addressGo=${addressGo}&jingdu=${jingdu}&weidu=${weidu}`,
				})
			}
		},
		//获取搜索地址传值
		getAddress(name, location, district) {
			var jwd = location.split(',')
			var weidu = jwd[1]
			var jingdu = jwd[0]
			var addressGo = district + name
			if (this.id == 0) {
				wx.navigateTo({
					// url: '/pages/addAddress/main?addressGo=' + addressGo,
					// // + '&jingdu=' + jingdu + '&weidu=' + weidu,
					url: `/pages/addAddress/main?addressGo=${addressGo}&jingdu=${jingdu}&weidu=${weidu}`,
				})
			}
			if (this.id == 1) {
				wx.navigateTo({
					// url: '/pages/updataAddress/main?addressGo=' + addressGo,
					// // + '&jingdu=' + jingdu + '&weidu=' + weidu,
					url: `/pages/updataAddress/main?addressGo=${addressGo}&jingdu=${jingdu}&weidu=${weidu}`,
				})
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	.header-c {
		display: flex;
		align-items: center;
		height: 100rpx;
		background-color: white;
		padding: 0 30rpx;
		border-bottom: 2rpx solid $spLine-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.header-l {
			display: flex;
			align-items: center;
			span {
				font-size: 28rpx;
				color: $textBlack-color;
				margin: 0 10rpx;
			}
		}
		.header-r {
			display: flex;
			align-items: center;
			flex: 1;
			.search-bar {
				align-items: center;
				justify-content: center;
				display: flex;
				flex: 1;
				background-color: #f6f6f6;
				height: 70rpx;
				border-radius: 8rpx;
				padding-left: 20rpx;
				margin-left: 30rpx;
				i {
					margin-right: 10rpx;
					color: #999999;
					font-size: 32rpx;
				}
				input {
					display: flex;
					flex: 1;
					width: 100%;
					font-size: 28rpx;
					height: 32rpx;
					margin-top: 5rpx;
				}
				.cancle {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 60rpx;
					margin-left: 20rpx;
					i {
						color: #999999;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	.addressList {
		width: 100%;
		background: white;
		padding-top: 100rpx;
		.add_ {
			width: 95%;
			margin: auto;
			border-bottom: 2rpx solid #e1e1e1;
			padding: 26rpx;
			line-height: 16px;

			.address_name {
				font-size: 30rpx;
				font-family: '楷体';
				display: block;
			}
			.address_desc {
				font-size: 25rpx;
				font-family: '楷体';
				color: #989898;
			}
		}
	}
	.nearby-address {
		display: flex;
		flex-direction: column;
		background-color: white;
		padding-top: 30rpx;
		margin-bottom: 88rpx;
		.header {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			i {
				font-size: 38rpx;
				color: $textDarkGray-color;
			}
			span {
				font-size: 24rpx;
				color: $textDarkGray-color;
				margin-left: 20rpx;
			}
		}
		.list-c {
			display: flex;
			flex-direction: column;
			margin-left: 70rpx;
			margin-right: 20rpx;
			background-color: magenta;
			.item {
				display: flex;
				flex-direction: column;
				height: 88rpx;
				background-color: white;
				justify-content: center;
				border-bottom: 2rpx solid $spLine-color;
				span {
					font-size: 25rpx;
					color: $textBlack-color;
				}
			}
			.item:last-child {
				border-bottom: 0rpx solid $spLine-color;
			}
		}
	}
}
</style>

